<template>
	<!-- 企业认证 -->
	<view @click="(moneyShow = false), companyClose()">
		<view class="font" style="padding-bottom: 280rpx;">
			<u--form labelPosition="left" :model="firmFrom" ref="firmFrom" labelWidth="100" :rules="rules">
				<view class="bg-white p-2">
					<u-form-item label="企业logo" prop="company_logo" borderBottom>
						<view class="flex justify-end content-end head_img">
							<u-upload
								:fileList="fileList"
								@afterRead="afterRead"
								@delete="deletePic"
								imageMode="aspectFill"
								name="orcode_img"
								:maxCount="1"
								:max-size="600 * 1024"
								@oversize="oversize"
							>
								<image src="/static/img2/my/default_headimg.png" mode="aspectFill" style="width:70rpx;height: 70rpx;"></image>
							</u-upload>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="企业名称" prop="company_name" borderBottom>
						<!-- <u--input v-model="firmFrom.company_name" maxlength="20" border="none" placeholder="请填写" @blur="nameChange"></u--input> -->
						<view class="name_box" @tap.stop.prevent>
							<u--input v-model="firmFrom.company_name" maxlength="20" border="none" placeholder="请输入企业名称"></u--input>
							<!-- @change="inputChange" -->
							<!-- <view class="tips_box p-2 shadow" v-show="companyShow">
								<image v-if="nameList.length <= 0" class="empty_img" src="@/static/img2/home/empty_img.png" mode="aspectFill"></image>
								<view v-else class="list">
									<scroll-view scroll-y="true" class="scroll-Y">
										<view class="list_item font_24_2 py-1" v-for="nameItem of nameList" :key="nameItem.id" @click="nameSelect(nameItem, index)">
											<rich-text :nodes="nameItem.company_name"></rich-text>
										</view>
									</scroll-view>
								</view>
							</view> -->
						</view>
					</u-form-item>
					<u-form-item label="所在地区" prop="district_cn" borderBottom @click="hideKey()">
						<u--input
							v-model="firmFrom.district_cn"
							maxlength="31"
							border="none"
							placeholder="请填写"
							@focus="hideKey(), openPicker()"
							suffixIcon="map"
							suffixIconStyle="color: #C0C0C0;font-size:35rpx"
						></u--input>
						<view class="" style="z-index: 10000;">
							<lotus-address v-if="lotusAddressData.visible" v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
						</view>
					</u-form-item>
					<u-form-item label="详细地址" prop="business_address" borderBottom>
						<u--input v-model="firmFrom.business_address" maxlength="50" border="none" placeholder="请填写"></u--input>
					</u-form-item>
					<u-form-item label="企业官网" prop="company_link">
						<u--input v-model="firmFrom.company_link" maxlength="70" border="none" placeholder="请设置"></u--input>
					</u-form-item>
				</view>
				<view class="h6 c_6 text-center mt-2 py">工商信息</view>
				<view class="bg-white p-2">
					<u-form-item label="营业执照" prop="certificate_img " borderBottom>
						<view class="flex justify-end" @click="takePicture">
							<u-input disabled disabledColor="#fff" border="none" :placeholder="cardplace">
								<template slot="suffix">
									<image v-if="!firmFrom.certificate_img" class="card_img  ml-1" src="/static/img2/my/card.png" mode=""></image>
									<image
										v-else
										class="card_img ml-1"
										@click.stop="previewImage(firmFrom.certificate_img)"
										:src="firmFrom.certificate_img"
										mode="scaleToFill"
									></image>
								</template>
							</u-input>
						</view>
					</u-form-item>
					<u-form-item label="成立时间" prop="establish_time" borderBottom>
						<u--input v-model="firmFrom.establish_time" disabledColor="#fff" border="none" placeholder="请选择" @focus="hideKey(), (timeShow = true)"></u--input>
					</u-form-item>
					<u-datetime-picker :show="timeShow" mode="date" @cancel="timeShow = false" @confirm="onConfirm" @change="hideKey()"></u-datetime-picker>
					<u-form-item label="注册资金" prop="registered" borderBottom>
						<u-input v-model="firmFrom.registered" border="none" placeholder="请填写">
							<template slot="suffix">
								<view class="registered_suf">
									<text v-if="firmFrom.registered" @click.stop="moneyShow = true">{{ firmFrom.currency }}</text>
									<view class="money bg-white container rounded_10 shadow text-center" v-if="moneyShow">
										<view class="money_item py-2 c_6" v-for="(item, index) of moneySelect" :key="index" @click.stop="moenyChange(item)">{{ item }}</view>
									</view>
								</view>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item label="企业性质" prop="nature_cn " borderBottom>
						<view class="flex justify-end" @click="natureShow = true">
							<view class="font" style="color: #c0c4cc;" v-if="!firmFrom.nature_cn">请选择</view>
							<view v-else class="font">{{ firmFrom.nature_cn }}</view>
						</view>
						<!-- <u--input v-model="firmFrom.nature_cn" disabledColor="#fff" border="none" placeholder="请选择" @focus="hideKey(), (natureShow = true)"></u--input> -->
					</u-form-item>
					<u-picker
						:show="natureShow"
						:columns="nature_cn_list"
						title="请选择企业性质"
						@confirm="natureConfirm"
						@cancel="natureShow = false"
						@change="hideKey()"
					></u-picker>
					<u-form-item label="企业员工" prop="scale_cn" borderBottom>
						<view class="flex justify-end" @click="scaleShow = true">
							<view class="font" style="color: #c0c4cc;" v-if="!firmFrom.scale_cn">请选择</view>
							<view v-else class="font">{{ firmFrom.scale_cn }}</view>
						</view>
						<!-- <u-input v-model="firmFrom.scale_cn" border="none" placeholder="请选择" @focus="(), (scaleShow = true)"></u-input> -->
					</u-form-item>
					<u-picker :show="scaleShow" :columns="scale_cn_list" title="请选择员工人数" @confirm="scaleConfirm" @cancel="scaleShow = false" @change="hideKey()"></u-picker>
					<u-form-item label="主营产品" prop="main_products"><u--input v-model="firmFrom.main_products" border="none" placeholder="请填写"></u--input></u-form-item>
				</view>
			</u--form>
		</view>

		<view class="btn_box">
			<view class="h6 text-center py-2">
				若企业已认证，请点击此处进行关联
				<text class="ml-2" style="color: #0054FF;" @click="goPages('./child_firm')">马上关联</text>
			</view>
			<view class="bg-white p-2">
				<view class="bottom_btn flex justify-around">
					<view class="" @click="collaborateShow = true">
						<image class="callme m-auto" src="@/static/img2/my/callme.png" mode="aspectFit"></image>
						<text class="font_24 c_9">在线联系</text>
					</view>
					<button class="btn h6 text-white" @click="submit">马上认证</button>
				</view>
			</view>
		</view>
		<!-- 识别信息弹窗 -->
		<u-modal :show="imgInfoShow" title="识别成功" :showCancelButton="true" @confirm="confirm" @cancel="cancel">
			<view class="slot-content">
				<view class="h5 c_6" v-if="imgInfo.establish_time">
					成立时间：
					<text class="c_9">{{ imgInfo.establish_time }}</text>
				</view>
				<view class="h5 c_6" v-if="imgInfo.registered">
					注册资金：
					<text class="c_9">{{ imgInfo.registered }}</text>
				</view>
			</view>
		</u-modal>
		<!-- 在线联系 -->
		<u-popup :show="collaborateShow" mode="center" @close="collaborateShow = false" @open="collaborateShow = true">
			<view class="py-2 px-4 popup_warp">
				<view class="close_icon" @click="collaborateShow = false"><u-icon name="close" color="#999" size="15"></u-icon></view>
				<view class="font text-center font-weight-bold">在线联系</view>
				<image class="p-2" src="/static/img2/my/solarbe.jpg" mode="aspectFill" style="width: 300rpx;height: 300rpx;"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { uploadImage, businessCardImg } from '@/api/common.js';
import { basicsUpdate, companyNameYet, enterpriseNamee } from '@/api/my/userinfo.js';
import lotusAddress from '@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue';
import util from '@/common/js/util.js';
export default {
	components: {
		lotusAddress
	},
	data() {
		return {
			firmFrom: {
				company_logo: '',
				company_name: '',
				district_cn: '',
				business_address: '',
				company_link: '',
				certificate_img: '',
				establish_time: '',
				registered: '',
				nature_cn: '',
				scale_cn: '',
				main_products: '',
				business_data: '',
				currency: '人民币'
			},
			rules: {
				// company_logo: [
				// 	{
				// 		type: 'string',
				// 		required: true,
				// 		message: '请上传企业logo',
				// 		trigger: ['blur', 'change']
				// 	}
				// ],
				company_name: [
					{
						type: 'string',
						required: true,
						message: '请填写企业名称',
						trigger: ['blur', 'change']
					}
				],
				district_cn: [
					{
						type: 'string',
						required: true,
						message: '请选择企业所在地',
						trigger: ['blur']
					}
				],
				business_address: [
					{
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					}
				],
				company_link: [
					{
						type: 'string',
						required: true,
						message: '请填写企业官网',
						trigger: ['blur', 'change']
					},
					{
						message: '官网地址应是英文字母或数字',
						pattern: /[\w.]+/,
						trigger: ['blur']
					}
				],
				certificate_img: [
					{
						type: 'string',
						required: true,
						message: '请拍摄照片',
						trigger: ['blur', 'change']
					}
				],
				establish_time: [
					{
						type: 'string',
						required: true,
						message: '请填写成立时间',
						trigger: ['blur']
					}
				],
				registered: [
					{
						type: 'number',
						required: true,
						message: '请填写注册资金',
						trigger: ['blur']
					}
				],
				nature_cn: [
					{
						type: 'string',
						required: true,
						message: '请选择企业性质',
						trigger: ['blur', 'change']
					}
				],
				scale_cn: [
					{
						type: 'string',
						required: true,
						message: '请选择公司员工人数',
						trigger: ['blur', 'change']
					}
				],
				main_products: [
					{
						type: 'string',
						required: true,
						message: '请填写主营产品',
						trigger: ['blur', 'change']
					}
				]
			},
			fileList: [], //头像
			// 地区选择
			lotusAddressData: {
				visible: false,
				provinceName: '',
				cityName: '',
				townName: ''
			},
			timeShow: false,
			cardplace: '点击上传',
			// imgpath: [] //生成的名片
			nature_cn_list: [['国企', '民营', '合资', '外商独资', '股份制企业', '上市公司', '国家机关', '事业单位', '代表处', '港澳台公司', '社会团体', '学校/下级院校', '其他']],
			scale_cn_list: [['20人以下', '20-99人', '100-499人', '500-999人', '1000-9999人', '10000人以上']],
			natureShow: false,
			scaleShow: false,
			imgInfoShow: false, //营业执照识别信息弹窗
			imgInfo: {
				establish_time: '',
				registered: ''
			},
			moneyShow: false,
			moneySelect: ['万人民币', '万美元'],
			collaborateShow: false,
			companyShow: false,
			nameList: [], //关联公司
			timer: null,
			cName: ''
		};
	},
	components: {
		'lotus-address': lotusAddress
	},
	onReady() {
		this.$refs.firmFrom.setRules(this.rules);
	},
	onLoad() {
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		// 删除logo
		deletePic(event) {
			// console.log(event);
			this.fileList.splice(0, 1);
			this.firmFrom.company_logo = '';
		},
		// 新增logo
		async afterRead(event) {
			// console.log(event);
			uploadImage(event)
				.then(res => {
					if (res.code == 0) {
						this.fileList.push({ url: res.img });
						this.firmFrom.company_logo = this.fileList[0].url;
						// console.log(this.firmFrom);
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('头像上传失败');
				});
		},
		// nameChange() {
		// 	companyNameYet({ company_name: this.firmFrom.company_name })
		// 		.then(res => {
		// 			// console.log(res);
		// 			if (res.code == 0) {
		// 				return;
		// 			} else {
		// 				uni.$u.toast(res.msg);
		// 				this.firmFrom.company_name = '';
		// 			}
		// 		})
		// 		.catch(err => {
		// 			console.log('企业名称请求出错', err);
		// 		});
		// },
		// inputChange(e) {
		// 	if (this.timer !== null) clearTimeout(this.timer);
		// 	this.timer = setTimeout(() => {
		// 		// if (e.length < 1) return;
		// 		this.getCompany(e);
		// 	}, 500);
		// },
		// 获取企业列表
		// getCompany(val) {
		// 	this.companyShow = true;
		// 	enterpriseNamee({ kw: val || '', token: uni.getStorageSync('userInfo').token || '' })
		// 		.then(res => {
		// 			// console.log('企业', res);
		// 			if (res.code == 0) {
		// 				// 过滤出符合条件的值高亮
		// 				res.data.map((item, index) => {
		// 					if (item.company_name.includes(this.firmFrom.company_name)) {
		// 						item.name = item.company_name;
		// 						item.company_name = this.join(item.company_name, this.firmFrom.company_name);
		// 					}
		// 				});
		// 				this.nameList = res.data;
		// 				// console.log(this.nameList);
		// 			} else {
		// 				uni.$u.toast(res.msg);
		// 			}
		// 		})
		// 		.catch(err => {
		// 			console.log('获取企业列表失败', err);
		// 		});
		// },
		// 关键字高亮
		// join(str, key) {
		// 	var reg = new RegExp(`(${key})`, 'gm');
		// 	var replace = '<span style="color:#CF1526;font-weight:bold;">$1</span>';
		// 	return str.replace(reg, replace);
		// },
		// nameSelect(item, idx) {
		// 	// console.log(item);
		// 	this.firmFrom.company_name = item.name;
		// 	this.cName = item.name;
		// 	setTimeout(() => {
		// 		this.companyShow = false;
		// 	});
		// 	// this.$refs.cardFrom[idx].clearValidate('companyname');
		// },
		// companyClose() {
		// 	this.companyShow = false;
		// 	// 如果没有选择企业列表中的企业将把输入框置空
		// 	if (!this.cName) {
		// 		this.firmFrom.company_name = '';
		// 	}
		// },
		//打开地区选择器
		openPicker() {
			this.lotusAddressData.visible = true;
			this.lotusAddressData.provinceName = '北京市';
			this.lotusAddressData.cityName = '北京市';
			this.lotusAddressData.townName = '东城区';
		},
		//回传已选的省市区的值
		choseValue(res) {
			//res数据源包括已选省市区与省市区code
			// console.log(res);
			this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
			//res.isChose = 1省市区已选 res.isChose = 0;未选
			if (res.isChose) {
				this.lotusAddressData.provinceName = res.province; //省
				this.lotusAddressData.cityName = res.city; //市
				this.lotusAddressData.townName = res.town; //区
				this.firmFrom.district_cn = `${res.province} ${res.city} ${res.town}`;
			}
			this.$refs.firmFrom.clearValidate('district_cn');
		},
		// 时间选择器
		onConfirm(e) {
			// console.log('时间选择器', e);
			this.firmFrom.establish_time = util.happenTimeFun(e.value, 'line');
			// console.log(this.firmFrom.establish_time);
			this.$refs.firmFrom.clearValidate('establish_time');
			this.timeShow = false;
		},
		// 名片拍照
		takePicture() {
			console.log('1111');
			var that = this;
			uni.chooseImage({
				count: 6, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: async imgRes => {
					// let base64_img = await util.urlTobase64(that.imgpath[0]);
					// console.log('图片', base64_img);
					let msg = {
						type: 1,
						file: imgRes.tempFilePaths[0],
						token: uni.getStorageSync('userInfo').token || ''
					};
					console.log('222', imgRes);
					businessCardImg(msg)
						.then(res => {
							console.log('333', res);
							if (res.code == 0) {
								// console.log('照片识别', res);
								if (res.data.length == 0 || res.data == '{}') {
									uni.$u.toast('未识别到营业执照相关信息');
								} else {
									// that.imgpath = res.img;
									that.firmFrom.business_data = JSON.stringify(res.data);
									that.firmFrom.certificate_img = res.img;
									that.cardplace = '重新识别';
									that.imgInfoShow = true;
									var time = '';
									if (res.data.establish_date) {
										time = res.data.establish_date;
										// let data = timeTest.split('-');
										// time = data[0] + '年' + data[1] + '月' + data[2] + '日';
									}
									that.imgInfo = {
										establish_time: time,
										registered: res.data.captial
									};
								}
							} else {
								uni.$u.toast(res.msg);
							}
						})
						.catch(err => {
							console.log('获取数据失败', err);
						});
				},
				fail: err => {
					console.log('获取图片失败', err);
				}
			});
		},
		moenyChange(val) {
			this.firmFrom.currency = val;
			this.moneyShow = false;
		},
		// 图片预览
		previewImage(url) {
			//uniapp预览轮播图
			uni.previewImage({
				current: 0, //预览图片的下标
				urls: [url]
			});
		},
		// 确认
		confirm() {
			this.firmFrom.establish_time = this.imgInfo.establish_time || '';
			// console.log(this.imgInfo.registered.replace(/[^\d]/g, ' '));
			this.firmFrom.registered = parseFloat(this.imgInfo.registered.replace(/[^\d]/g, ' ')) || '';
			this.$refs.firmFrom.clearValidate('registered');
			setTimeout(() => {
				this.cancel();
			}, 500);
			console.log(this.imgInfo.registered, this.imgInfo.registered.indexOf('美元') !== -1);
			this.firmFrom.currency = this.imgInfo.registered.indexOf('美元') !== -1 ? '万美元' : '万人民币';
		},
		// 取消
		cancel() {
			this.imgInfoShow = false;
		},
		// 选择企业性质
		natureConfirm(e) {
			this.firmFrom.nature_cn = e.value[0];
			this.natureShow = false;
			this.$refs.firmFrom.clearValidate('nature_cn');
		},
		// 选择员工人数
		scaleConfirm(e) {
			this.firmFrom.scale_cn = e.value[0];
			this.scaleShow = false;
			this.$refs.firmFrom.clearValidate('scale_cn');
		},
		submit() {
			// console.log('okok');
			this.$refs.firmFrom
				.validate()
				.then(res => {
					let msg = {
						token: uni.getStorageSync('userInfo').token || '',
						...this.firmFrom
					};
					basicsUpdate(msg)
						.then(res => {
							// console.log(res);
							uni.$u.toast(res.msg);
							if (res.code == 0) {
								uni.navigateBack({
									delta: 1
								});
							}
						})
						.catch(err => {
							console.log('认证失败', err);
						});
				})
				.catch(errors => {
					// console.log(errors);
					uni.$u.toast('请正确填写企业的资料');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .head_img .u-upload__wrap__preview__image {
	width: 70rpx !important;
	height: 70rpx !important;
	border-radius: 100%;
}
::v-deep .u-upload__button {
	width: 70rpx !important;
	height: 70rpx !important;
	border-radius: 100%;
}
::v-deep .u-upload__wrap__preview__image {
	width: 70rpx !important;
	height: 70rpx !important;
	border-radius: 100%;
}
::v-deep .u-upload__wrap__preview {
	margin: 0;
}
::v-deep .uni-input-input {
	text-align: right;
	color: #666666;
}
::v-deep .uni-input-placeholder {
	text-align: right;
}
::v-deep .u-form-item__body__right__message {
	text-align: right;
}
::v-deep .u-form-item__body__right__content__slot {
	justify-content: flex-end;
	padding-right: 20rpx;
}
::v-deep .u-input__content__field-wrapper__field {
	text-align: right !important;
}
::v-deep .u-upload__wrap {
	justify-content: flex-end;
}
.btn_box {
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #f2f2f2;
	z-index: 999;
	.bottom_btn {
		.callme {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.btn {
		width: 80%;
		height: 90rpx;
		line-height: 90rpx;
		background: $color14;
		border-radius: 14rpx;
	}
}
.card_img {
	width: 85rpx;
	height: 54rpx;
	// border: 1px solid #cfcfcf;
	border-radius: 10rpx;
	padding-right: 20rpx;
}
.img_text {
	font-size: 32px;
	color: #c0c0c0;
	// line-height: 126px;
}
.registered_suf {
	position: relative;
	.money {
		position: absolute;
		top: 50rpx;
		right: 0;
		width: 200rpx;
		border: 1px solid #f2f2f2;
		background-color: #fff;
		z-index: 99;
		.money_item:first-child {
			border-bottom: 1px solid #c0c0c0;
		}
	}
}
.popup_warp {
	position: relative;
	.close_icon {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}
}
.name_box {
	position: relative;
	.tips_box {
		width: 500rpx;
		max-height: 500rpx;
		position: absolute;
		top: 60rpx;
		right: -10rpx;
		background-color: $color2;
		z-index: 99;
		border-radius: 15rpx;
		border: 1px solid #f2f2f2;
		.empty_img {
			width: 100%;
			height: 300rpx;
			margin: auto;
		}
		.scroll-Y {
			height: 450rpx;
			.list_item {
				border-bottom: 1px solid #f2f2f2;
			}
			.list_item:last-child {
				border: 0;
			}
		}
	}
}
</style>
